<template>
  <el-drawer
    size="55%"
    :visible.sync="visible"
    direction="rtl"
    :append-to-body="appendToBody"
    :before-close="closeDefectDrawer"
  >
    <template slot="title">
      <div class="defect-edit-header">
        <div class="defect-edit-title">
          <i class="el-icon-arrow-left" @click="cancel" />
          <div style="line-height: 36px;">
            <span class="defect-edit-title-num">#{{ defect.projectNum }}</span>
            <span class="defect-edit-title-content">
              <defect-type-flag :defect="defect" />
              <defect-state-flag :defect="defect" />
              <focus-member-list
                v-model="defect.focusList"
                module-name="defect"
                :data-id="defect.defectId"
                :tooltip="false"
              />
              {{ defect.defectName }}
            </span>
          </div>
        </div>
        <div class="report-edit-tools">
          <defect-tools :defect="defect" size="mini" @delete="deleteHandle" @log="logHandle" />
        </div>
      </div>
    </template>
    <div v-loading="loading" class="app-container defect-edit-body">
      <div class="defect-edit-body-log-first">
        <list-defect-log ref="defectLogFirst" :page-size="1" />
      </div>
      <el-collapse v-model="activeNames">
        <el-collapse-item :title="$i18n.t('describe')" name="defectDescribe">
          <markdown-it-vue v-if="defectDescribeText" :content="defectDescribeText" />
          <el-empty v-else :description="$t('no-data')" />
        </el-collapse-item>
        <el-collapse-item v-if="defect.imgUrls" :title="$i18n.t('image')" name="imgUrls">
          <div class="defect-image">
            <el-image
              v-for="(img,index) in getUrl(defect.imgUrls)"
              :key="index"
              :src="img"
              :preview-src-list="getUrl(defect.imgUrls)"
              fit="contain"
            />
          </div>
        </el-collapse-item>
        <el-collapse-item :title="$i18n.t('defect.base-info')" name="base">
          <el-row class="defect-edit-body-base" :gutter="20">
            <el-col :span="12">
              <label>{{ $t('project') }}:</label>
              <span>{{ defect.projectName }}</span>
            </el-col>
            <el-col :span="12">
              <label>{{ $t('module') }}:</label>
              <span>{{ defect.moduleName }}</span>
            </el-col>
            <el-col :span="12">
              <label>{{ $t('version') }}:</label>
              <span>{{ defect.moduleVersion }}</span>
            </el-col>
            <el-col :span="12">
              <label>{{ $t('state') }}:</label>
              <span>{{ $t(defect.defectStateName) }}</span>
            </el-col>
            <el-col :span="12">
              <label>{{ $t('plan-start-time') }}:</label>
              <span>{{ $t(defect.planStartTime) }}</span>
            </el-col>
            <el-col :span="12">
              <label>{{ $t('plan-end-time') }}:</label>
              <span>{{ $t(defect.planEndTime) }}</span>
            </el-col>
            <el-col :span="12">
              <label>{{ $t('defect.life-time') }}:</label>
              <span>{{ defectLife(defect) }}</span>
            </el-col>
            <el-col :span="12">
              <label>{{ $t('reject') }}:</label>
              <span>{{ defect.rejectCount }}</span>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item v-if="defect.annexUrls" :title="$i18n.t('annex')" name="annexUrls">
          <div class="defect-edit-body-annex">
            <el-link v-for="(file,index) in getUrl(defect.annexUrls)" :key="index" type="primary" :href="file">{{ getFileName(file) }}</el-link>
          </div>
        </el-collapse-item>
        <el-collapse-item v-if="defectCase && defectCase.caseId" :title="$i18n.t('case')" name="caseId">
          <case-card :case-model="defectCase" :state-visible="true" :step-index.sync="defect.caseStepId" :edit="false" />
        </el-collapse-item>
        <el-collapse-item :title="$i18n.t('log')" name="log">
          <list-defect-log ref="defectLog" :page-size="10" show-comment />
        </el-collapse-item>
      </el-collapse>
      <div slot="footer" class="dialog-footer" />
    </div>
  </el-drawer>
</template>

<script>
import { addDefect, closeEditWindow, getDefect, updateDefect } from '@/api/system/defect'
import SelectProjectMember from '@/components/Project/SelectProjectMember'
import SelectModule from '@/components/Module/SelectModule'
import ImageUpload from '@/components/ImageUpload'
import ListDefectLog from '@/components/ListDefectLog'
import DefectTools from '@/components/Defect/DefectTools'
import DefectTypeFlag from '@/components/Defect/DefectTypeFlag'
import DefectStateFlag from '@/components/Defect/DefectStateFlag'
import CaseCard from '@/components/Case/CaseCard'
import FocusMemberList from '@/components/FocusMemberList'
import { getCase } from '@/api/system/case'
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'
import { lifeTime } from '@/utils/defect'

export default {
  name: 'EditDefect',
  dicts: ['defect_level'],
  components: { ImageUpload, SelectProjectMember, SelectModule, ListDefectLog, DefectTools, DefectTypeFlag, DefectStateFlag, CaseCard, MarkdownItVue, FocusMemberList },
  props: {
    projectId: {
      type: Number,
      default: null
    },
    appendToBody: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      defectId: null,
      activeNames: [],
      // 显示窗口
      visible: false,
      // 缺陷对象
      defect: {},
      // 用例
      defectCase: {},
      // 表单参数
      form: {
        defectLevel: 'middle'
      },
      // 表单校验
      rules: {
        defectType: [
          { required: true, message: this.$i18n.t('defect.defect-type-cannot-empty'), trigger: 'change' }
        ],
        handleBy: [
          { required: true, message: this.$i18n.t('defect.handle-by-cannot-empty'), trigger: 'input' }
        ],
        defectName: [
          { required: true, message: this.$i18n.t('defect.defect-name-cannot-empty'), trigger: 'input' }
        ],
        defectLevel: [
          { required: true, message: this.$i18n.t('defect.defect-level-cannot-empty'), trigger: 'input' }
        ],
        defectDescribe: [
          { required: true, message: this.$i18n.t('defect.describe-cannot-empty'), trigger: 'input' }
        ]
      },
      options: {
        markdownIt: {
          linkify: true
        },
        linkAttributes: {
          attrs: {
            target: '_blank',
            rel: 'noopener'
          }
        }
      }
    }
  },
  computed: {
    getUrl: function() {
      return function(urls) {
        const imgs = urls ? urls.split(',') : []
        return imgs.map(i => {
          return process.env.VUE_APP_BASE_API + i
        })
      }
    },
    getFileName: function() {
      return function(url) {
        if (!url) return null
        const arr = url.split('\/')
        return arr[arr.length - 1]
      }
    },
    defectLife: function() {
      return function(defect) {
        return lifeTime(defect)
      }
    },
    defectDescribeText() {
      return (typeof this.defect?.defectDescribe === 'string' ? this.defect.defectDescribe : '')
        .replace(/\~/g, '\\~')
        .replace(/!\[.*?\]\((.*?)\)/g, (match, url) => {
          return url.startsWith('http')
            ? match
            : `![](${document.location.origin}${url.startsWith('/') ? url : '/' + url})`
        })
    }
  },
  // 移除滚动条监听
  destroyed() {
    this.$floatMenu.windowsDestory()
  },
  methods: {
    /** 初始化浮动菜单 */
    initFloatMenu() {
      this.$floatMenu.windowsInit(document.querySelector('.main-container'))
      this.$floatMenu.resetMenus()
    },
    // 获取缺陷信息
    getDefectInfo(defectId) {
      this.loading = true
      this.activeNames = ['base', 'log']
      getDefect(defectId).then(res => {
        this.loading = false
        this.defect = res.data
        if (this.defect.defectDescribe) {
          this.activeNames.push('defectDescribe')
        }
        if (this.defect.imgUrls && this.defect.imgUrls.length > 0) {
          this.activeNames.push('imgUrls')
        }
        if (this.defect.annexUrls && this.defect.annexUrls.length > 0) {
          this.activeNames.push('annexUrls')
        }
        if (this.defect) {
          this.activeNames.push('caseId')
          this.getCase(this.defect.caseId)
        }
      }).catch(e => {
        this.loading = false
        this.visible = false
      })
    },
    // 获取用例
    getCase(caseId) {
      if (caseId) {
        getCase(caseId).then(res => {
          this.defectCase = res.data
        })
      } else {
        this.defectCase = {}
      }
    },
    // 打开操作
    open(defectId) {
      this.visible = true
      this.reset()
      this.defectId = defectId
      this.getDefectInfo(defectId)
      this.$nextTick(() => {
        this.$refs.defectLogFirst.open(defectId)
        this.$refs.defectLog.open(defectId)
      })
      this.initFloatMenu()
    },
    // 取消按钮
    cancel() {
      this.$emit('close')
      this.visible = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        defectId: null,
        defectType: null,
        defectName: null,
        defectDescribe: null,
        annexUrls: null,
        projectId: null,
        testPlanId: null,
        caseId: null,
        dataSources: null,
        dataSourcesParams: null,
        moduleId: null,
        moduleVersion: null,
        createBy: null,
        updateTime: null,
        createTime: null,
        updateBy: null,
        defectState: null,
        caseStepId: null,
        handleBy: null,
        handleTime: null,
        defectLevel: 'middle'
      }
      this.activeNames = ['base', 'log']
      this.resetForm('form')
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.form.projectId = this.projectId
          if (this.form.defectId != null) {
            updateDefect(this.form).then(res => {
              this.$modal.msgSuccess('修改成功')
              this.cancel()
              this.$emit('added', res)
            })
          } else {
            addDefect(this.form).then(res => {
              this.$modal.msgSuccess('新增成功')
              this.cancel()
              this.$emit('added', res)
            })
          }
        }
      })
    },
    /** 关闭缺陷抽屉窗口 */
    closeDefectDrawer(done) {
      done()
      closeEditWindow(this.defectId)
      this.cancel()
    },
    handleByChangeHandle(members) {
      console.log(members, this.form.handleBy)
    },
    logHandle(log) {
      this.open(this.defectId)
      this.$emit('change', this.defect)
      // this.$refs.defectLog.addLog(log);
    },
    deleteHandle() {
      this.$emit('delete', this.defect)
      this.cancel()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-drawer {
  border-left: 3px solid #ff4949;
}
::v-deep .el-drawer__header {
  margin-bottom: 0px;
  max-width: calc(100vw);
}
.defect-edit-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  .report-edit-tools {
    padding: 5px 0px;
  }
  .defect-edit-title {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    overflow: hidden;
    > * {
      float:left;
    }
    .el-icon-arrow-left {
      font-size: 22px;
    }
    .el-icon-arrow-left:hover {
      cursor: pointer;
      color: #909399;
    }
    .defect-edit-title-name {
      //flex: 1;
      //overflow: hidden;
      //white-space: nowrap;
      //text-overflow: ellipsis;
    }
    .defect-edit-title-content{
      font-size: 20px;
      color: #303133;
      font-weight: 500;
      line-height: 36px;
    }
    .defect-edit-title-content .defect-type-tag{
      float: left;
      margin-right: 2px;
      margin-top: 5px;
      padding: 1px 10px;
    }
    .defect-edit-title-content .project-member-icons{
      float: left;
      margin-right:10px;
    }
    .defect-edit-title-content .el-tag--dark.el-tag--danger{
      float: left;
      margin-right:10px;
      margin-top: 5px;
    }
    .defect-edit-title-num, .defect-edit-title-name {
      font-size: 20px;
      color: #303133;
      font-weight: 500;
      float: left;
      margin-right:10px;
    }
    > * {
      margin-right:10px;
    }
  }
}
.defect-edit-body {
  padding-left: 30px;
  padding-right: 30px;
  .defect-edit-body-log-first {
    border:#E4E7ED 1px solid;
    border-radius: 5px;
    padding: 15px 15px 12px 15px;
    margin-bottom: 10px;
  }
  ::v-deep .el-collapse {
    .el-collapse-item__header {
      font-size: 16px;
    }
    border-width: 0px;
    .el-collapse-item:last-child {
      .el-collapse-item__wrap {
        border-width: 0px;
      }
    }
  }
  h5 {
    font-size: 18px;
    color: #303133;
    margin: 10px 0px;
  }
  .defect-edit-body-base {
    .el-col {
      margin-bottom: 20px;
      label {
        font-size: 14px;
        color: #303133;
        width: 120px;
        display: inline-block;
        justify-content: flex-start;
        margin-right: 10px;
        text-align: right;
      }
    }
  }
  .defect-edit-body-annex {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
}
::v-deep .el-drawer__close-btn {
  display: none;
}
.defect-image {
  display: inline-flex;
  flex-direction: row;
  gap: 10px;
  flex-wrap: wrap;
  > .el-image {
    width: 150px;
    height: 150px;
  }
}

::v-deep.el-tag{
  font-size: 13px !important;
  vertical-align: 1px;
}
</style>
